<template>
    <div class="customized">
        <van-nav-bar title="标题" fixed>
            <template #left>
                <van-icon name="arrow-left" size="24" color="#999" @click="back"/>
            </template>
        </van-nav-bar>
        <h3 class="hint">根据您的要求，为你找到以下产品</h3>
        <div class="scene">
            <Customized :country="country" :continent="continent"></Customized>
        </div>
        <div class="need">
            <p>如果您对以上产品均不满意</p>
            <span>猛戳下面按钮，把您的需求提交给我们，定制师将为您量身设计线路。</span><br>
            <p class="tocustomBtn" @click="goCustom">提交新需求</p>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from 'vant';

Vue.use(NavBar);
import Customized from '@/components/content/customizedVal'
export default {
    data () {
        return {
            country:'',
            continent:'',
        };
    },

    components: {
        Customized,
    },

    computed: {},

    created(){
        // 接收地址栏的参数(请求数据使用)
        this.country=this.$route.params.country
        this.continent=this.$route.params.continent
        // 隐藏底部导航
        this.$store.commit("my/setIsShow", false);
    },

    mounted() {},

    methods: {
        // 返回上一页
        back(){
            this.$router.go(-1)
        },
        // 去往定制页面
        goCustom(){
            this.$router.push('/custom')
        }
    },

    beforeDestroy(){
        this.$store.commit("my/setIsShow", true);
    }
}

</script>
<style scoped>
.customized{
    background: #f2f2f2;
}
.van-nav-bar{
    background: #f2f2f2;
    border-bottom:1px solid #666;
}
.hint{
    width:100%;
    line-height: 36px;
    color:#333;
    text-align: center;
    background: white;
    margin-top:50px;
}
.need{
    height:150px;
    text-align:center;
    font-size:16px;
    position:fixed;
    bottom:0;
    background: white;
}
.need span{
    font-size:12px;
}
.need .tocustomBtn{
    padding:8px 12px;
    color:#ffffff;
    background: #ec7a27;
}
</style>